<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">
<head>
	<title>MooTools Gone Wild: Implement Element Flashing Example</title>
	<meta name="description" content="" />
	<link href="http://davidwalsh.name/wp-content/themes/david-walsh/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	body	{ background:#fff; }
	.exhead	{ padding:5px 5px 5px 10px; border-top:2px solid #ccc; border-bottom:2px solid #ccc; background:#eee; }
	.content	{ padding:20px; }
	#header-title  { padding-left:10px; color:#000; }
	#header-name-subtitle	{ color:#000; }
	#header-logo	{ display:none; }
</style>
	<style type="text/css">
		#flash-me, #scroll-to-me, #flash-me-ajax { width:200px; padding:20px; border:1px solid #fc0; }
	</style>
	<script type="text/javascript" src="mootools-1.2-core.js"></script>

	<script type="text/javascript">
		
		/* dom ready... */
		window.addEvent('domready', function() {
			
			/* implement flashing */
			Element.implement({
				flash: function(to,from,reps,prop,dur) {
					
					//defaults
					if(!reps) { reps = 1; }
					if(!prop) { prop = 'background-color'; }
					if(!dur) { dur = 250; }
					
					//create effect
					var effect = new Fx.Tween(this, {
							duration: dur,
							link: 'chain'
						})
					
					//do it!
					for(x = 1; x <= reps; x++)
					{
						effect.start(prop,to,from).start(prop,from,to);
					}
				}
			});
			
			/* flash on click */
			$('flash-link').addEvent('click', function () {
				$('flash-me').flash('#fff','#fffea1',5,'background-color',500);
			});
			
			/* flash on ajax complete */
			$('flash-link-ajax').addEvent('click', function () {
				//make the ajax call
				var req = new Request({
					method: 'get',
					url: 'element-flashing.php',
					data: { 'do' : '1' },
					onRequest: function() {  },
					onComplete: function(response) {
						$('flash-me-ajax').set('text',response).flash('#fff','#fffea1',5,'background-color',500); 
					}
				}).send();
				
			});
			
			/* flash on scroll ending */
			$('flash-link-scroll').addEvent('click', function() {
				var scroller = new Fx.Scroll(window, {
					onComplete: function() {
						$('scroll-to-me').flash('#fff','#fffea1',10);
					}
				}).toElement('scroll-to-me');
			});
		});
		
	</script>
</head>
<body>
<div id="header"><div id="header-right-wrap"><div id="header-1"><div id="header-links"><form id="searchform" method="get" action="/"><a href="/50-off-dreamhost-hosting" style="color:#e95e25;" title="Great Web Hosting::At the maximum discount rate!" class="tool-tip">$50 Off Web Hosting!</a> | <span id="tla-link"><script type="text/javascript">/* <![CDATA[ */function affiliateLink(str){ str = unescape(str); var r = ''; for(var i = 0; i < str.length; i++) r += String.fromCharCode(7^str.charCodeAt(i)); document.write(r); }affiliateLink('%3Bf%27ouba%3A%25ossw%3D%28%28ppp%29sb%7Fs*knil*fct%29dhj%288uba%3A651417%259Jhibsn%7Db%27%5Ehru%27Tnsb%3B%28f9');/* ]]> */</script></span> | <a href="/">Home</a> | <a href="http://feeds.feedburner.com/Bludice" title="The Feed::Get my posts right in your feed reader." class="tool-tip">RSS Feed</a> | <a href="http://eco.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/Bludice" class="tool-tip" title="Feelin' My Vibe?::Add me to your NetVibes page!">NetVibes</a><input type="text" name="s" id="top-search-input" value="" title="Search::What are you looking for?" class="tool-tip" /></form></div><div class="clear"></div><div id="header-name"><div id="header-title">david walsh blog</div><div id="header-name-subtitle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PHP, MySQL, CSS, MooTools, and Everything Else</div><div class="clear"></div></div><div class="clear"></div></div></div><div class="clear"></div></div><!-- /HEADER -->

<div class="exhead">
	<b>Example Page for:</b> <a href="http://davidwalsh.name/mootools-gone-wild-implement-element-flashing">MooTools Gone Wild: Implement Element Flashing</a>
</div>
<div class="content">

	<h1>MooTools Gone Wild: Implement Element Flashing Example</h1>
	
	<h2>Example 1</h2>
	<p>This first example shows flashing on click.</p>

	<div id="flash-me"><a href="javascript:;" id="flash-link">Click here</a> to make me flash!</div><br /><br />
	
	<h2>Example 2</h2>
	<p>This second example shows flashing once an Ajax request has been completed.</p>
	<div id="flash-me-ajax"><a href="javascript:;" id="flash-link-ajax">Click here</a> to find out who the best rocker is!</div><br /><br />
	
	<h2>Example 3</h2>

	<p>This third example shows flashing when the user is brought to a specific part of the page.</p>
	<p><a href="javascript:;" id="flash-link-scroll">Click here</a> to see even more flashing below!</p>
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	
	
	<div id="scroll-to-me">

		Auto flash!
	</div>
	
</div>

</body>
</html>